<template>
  <div>
    <!-- 操作头 -->
    <div>
      <el-input
        v-model="value"
        prefix-icon="el-icon-search"
        placeholder="管理员姓名、昵称、用户名、手机号"
        :style="{width:'300px',margin:'10px'}"
      />
      <el-select v-model="value" placeholder="性别" :style="{width:'150px'}">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="value" placeholder="角色" :style="{width:'150px',margin:'10px'}">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="value" placeholder="状态" :style="{width:'150px'}">
        <el-option
          v-for="item in options3"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button
        type="primary"
        style="margin-left: 10px"
        size="medium"
      ><i class="el-icon-search" />搜索</el-button>
      <el-button size="medium" type="primary" @click="addManager">新增管理员</el-button>
      <el-button type="success" size="medium">批量导出</el-button>
    </div>
    <!-- 表格内容 -->
    <el-table border :data="tableData" :style="{margin:'10px',width:'100%'}">
      <el-table-column align="center" type="selection" />
      <el-table-column align="center" label="管理员ID" width="50px">
        <template slot-scope="scope">
          <span style="marginLeft: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="头像" width="80px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="管理员姓名" width="100px">
        <template slot-scope="scope">
          <span :style="{marginLeft: '10px',fontSize:'13px'}">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户名" width="80px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="昵称" width="80px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号" width="80px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邮箱" width="180px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="性别" width="60px">
        <template slot-scope="scope">
          <el-tag size="medium" :type="scope.row.isRole?'success':'danger'">男</el-tag></template>
      </el-table-column>
      <el-table-column align="center" label="角色" width="80px">
        <template slot-scope="scope">
          <el-tag type="info" size="medium">{{ scope.row.isRole? '是':'否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="所属社区" width="80px">
        <template slot-scope="scope">
          <el-tag size="medium" :type="scope.row.isRole?'success':''">{{ scope.row.isRole? '是':'否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="80px">
        <template slot-scope="scope">
          <el-tag size="medium" :type="scope.row.isRole?'success':'danger'">{{ scope.row.isRole? '是':'否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="入职日期" width="100px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="220px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            :disabled="scope.row.id==1"
            @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block" align="center">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="5"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增管理员弹窗 -->
    <el-dialog
      title="新增管理员"
      :visible.sync="addManagerDialogShow"
      width="30%"
      :before-close="closeManager"
    >
      <el-form ref="addForm" label-width="80px" :rules="addManangerFormRules" :model="addManangerForm">
        <el-form-item label="管理员姓名" prop="roleName">
          <el-input v-model="addManangerForm.roleName" />
        </el-form-item>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="addManangerForm.name" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addManangerForm.password" />
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="addManangerForm.nickname" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="addManangerForm.gender">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="addManangerForm.phone" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addManangerForm.email" />
        </el-form-item>
        <el-form-item label="角色" prop="roleName">
          <el-select v-model="addManangerForm.roleName" placeholder="角色">
            <el-option label="系统管理员" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属社区" prop="communityName">
          <el-select v-model="addManangerForm.communityName" placeholder="社区">
            <el-option label="东方红社区" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="addManangerForm.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addManagerDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="addManagerDialogShow = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList } from '@/api/role'
export default {
  data() {
    return {
      options1: [{
        value: '选项1',
        label: '男'
      }, {
        value: '选项2',
        label: '女'
      }],
      options2: [{
        value: '选项1',
        label: '系统管理员'
      }, {
        value: '选项2',
        label: '小区管理员'
      }, {
        value: '选项3',
        label: '停车管理员'
      }],
      options3: [{
        value: '选项1',
        label: '启用'
      }, {
        value: '选项2',
        label: '禁用'
      }],
      input: '',
      value: '',
      tableData: [
        {
          id: '1',
          name: '系统管理员',
          isRole: true
        },
        {
          id: '2',
          name: '系统管理员',
          isRole: true
        },
        {
          id: '3',
          name: '系统管理员',
          isRole: false
        },
        {
          id: '4',
          name: '系统管理员',
          isRole: true
        }
      ],
      currentPage: 1,
      addManagerDialogShow: false,
      addManangerFormRules: {
        email: {},
        name: {},
        nickname: {},
        password: {},
        phone: {}
      },
      addManangerForm() {}
      // imageUrl: ''
    }
  },
  created() {
    // this.getRoleList()
  },
  methods: {
    async getRoleList() {
      try {
        const data = await getRoleList()
        console.log(data)
      } catch (err) {
        console.log(err)
      }
    },
    addManager() {
      this.addManagerDialogShow = true
    },
    closeManager() {
      this.addManagerDialogShow = false
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }

}
</script>
<style  scoped>
el-input::-webkit-input-placeholder {
    /* placeholder颜色 */
    color: #aab2bd;
    /* placeholder字体大小 */
    font-size: 12px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
